<template>
  <div>
    <mt-popup v-model="popupVisible" position="right" :modal="false" class="popup-view">
      <div class="scroll-view">
        <customHeader middleTitle="选择设备sn/码id" @leftCallBack="popupHide" :jsBridgeBack="false"/>
        <!-- <div class="page-body" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"> -->
        <div class="page-body" v-if="visible">
          <!-- <no-data msg="暂无数据" v-if="!list.length"/> -->
          <!-- <div class="check-list" v-else> -->
          <div class="check-list">
            <div class="mint-checklist-label check-list_label" v-for="(item,index) in list" :key="index" @click="handleCheck(item)">
            <!-- <div class="mint-checklist-label check-list_label" v-for="(item,index) in currentList" :key="index" @click="handleCheck(item)"> -->
              <div class="checklist-wrapper">
                <div class="mint-checkbox-label" :class="{blue: checkedId==item.qrcodeId}">{{item.qrcodeName}}</div>
                <div class="mint-checkbox-label gray">{{item.qrcodeId}}</div>
              </div>
              <span class="mint-checkbox">
                <input type="radio" name="checkRadio" :checked="checkedId==item.qrcodeId" class="mint-checkbox-input"> 
                <span class="mint-checkbox-core"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";
import jsBridge from "../../tools/jsBridge.js";

export default {
  props: {
    checked: {
      type: String
    },
    list: {
      type: Array,
      default: []
    }
  },
  components: {
    customHeader,
    noData
  },
  data() {
    return {
      popupVisible: false,
      checkedId: '',
      visible: false,
      // currentList: [],
      // loading: false
    };
  },
  watch: {
    popupVisible(val) {
      if(val) {
        this.checkedId = this.checked || '';
        // if(this.currentList.length<=1 && this.list.length) {
          // setTimeout(()=>{
          //   // this.currentList = this.list.slice(0, 30);
          //   this.currentList = this.list;
          // }, 400);
        // }

        setTimeout(() => {
          this.visible = true;
        }, 100);
        
      }
    }
  },
  methods: {
    loadMore() {
      this.loading = true;
      let len = this.list.length-this.currentList.length;
      if(len) {
        this.loading = false;
        this.currentList = this.list.slice(0, this.currentList.length+30);
      }
    },
    popupHide() {
      this.popupVisible = false;
      this.visible = false;
      // this.loading = false;
      // this.currentList = [];
    },
    popupShow() {
      this.popupVisible = true;
    },
    handleCheck(item) {
      this.checkedId = item.qrcodeId;
      this.popupHide();
      this.$emit('setSnId', item);
    },
    handleChange(e, item) {
      this.popupHide();
      this.$emit('setSnId', item);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/public";
.popup-view {
  width: 100%;
  height: 100%;
  .check-list{
    .check-list_label {
      display: flex;
      color: #333;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      @include remCalc(font-size, 28);
      @include remCalc(padding, 15, 30);
      @include remCalc(height, 88);
      box-sizing: border-box;
      &:nth-of-type(n+2) {
        @include thin-border(false, false, top);
      }
      .mint-checkbox {
        .mint-checkbox-core {
          background-color: transparent;
          border-width: 0;
          &:after {
            border-color: #26a2ff;
            width: 8px;
            height: 16px;
            margin-top: -6px;
          }
        }
      }
      .checklist-wrapper {
        flex: 1;
      }
    }
  }
  .gray {
    color: #999;
    @include remCalc(font-size, 24);
  }
  .blue {
    color: #26a2ff
  }
}
</style>